<template>
  <div class="h5-container">
    <NavBar title="个人信息" :onClickLeft="toBack"></NavBar>

    <van-loading v-if="loading" />

    <div v-else>
      <van-cell-group class="person-content">
        <van-cell title="姓名" :value="userData.name" size="large" />
        <van-cell title="手机号" :value="userData.mobile" size="large" />
        <van-cell title="性别" :value="userData.gender | sexFilter" size="large" />
        <van-cell title="年龄" v-if="userData.age" :value="userData.age" size="large" />
        <van-cell title="学历" v-if="userData.education" :value="userData.education | educationFilter" size="large" />
        <van-cell title="身份证号码" v-if="userData.idcardNo" :value="userData.idcardNo" size="large" />
        <van-cell title="户籍" v-if="userData.birthPlace" :value="userData.birthPlace" size="large" />
        <van-cell title="现住址" v-if="userData.address" :value="userData.address" size="large" />
      </van-cell-group>

      <div  class="logout-btn">
        <van-button color="rgba(51, 65, 84, 0.7)" block @click="logout">退出登录</van-button>
      </div>
    </div>


  </div>
</template>

<script>
import { getInfo } from '@common/api/user';
import { GENDER, EDUCATION } from '@common/consts/worker';
import NavBar from './components/NavBar';

export default {
  name: 'person',
  components: {
    NavBar,
  },
  data() {
    return {
      loading: false,
      userData: {
        name: '',
        mobile: '',
        gender: '',
      },
    };
  },
  filters: {
    sexFilter(gender) {
      for (const k of GENDER) {
        if (k.value === gender) {
          return k.label;
        }
      }
      return '';
    },
    educationFilter(education) {
      for (const k of EDUCATION) {
        if (k.value === education) {
          return k.label;
        }
      }
      return '';
    },
  },
  created() {
    this.getWorkerInfo();
  },
  methods: {
    toBack() {
      this.$router.push({
        path: '/',
      });
    },
    // 获取用户信息
    async getWorkerInfo() {
      this.loading = true;
      const res = await getInfo();
      if (res?.code === 20000) {
        this.userData = res?.data;
      }
      this.loading = false;
    },

    // 退出登录
    async logout() {
      await this.$store.dispatch('user/logout');
      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
    },

  },
};
</script>

<style lang="scss" scoped>
.person-content {
  position: relative;
  margin-top: 100px;
}
.logout-btn {
  margin: 100px 30px;
}
</style>

